<template>
  <div class="app-container">
     <dr-data-table ref="dataTable"
                    :data-table-params="dataTableParams"
                    :query-column-params="queryColumnParams"
                    @showDetail="showDetail(arguments)"
                    @showEdit="handleAdd(arguments)"
                    @submit="handleSubmit(arguments)"
                    @delete="handleDelete(arguments)"
                    @export="handleExport(arguments)"
                    @list="getList(arguments)"
     ></dr-data-table>
    <detail-dialog ref="detailDialog" @refreshDataList="refreshDataList"></detail-dialog>
    <dr-edit-form ref="editDialog"
                  :edit-form-param="editFormParam"
                  @initEdit="initEdit(arguments)"
                  @saveAdd="saveAdd(arguments)"
                  @saveEdit="saveEdit(arguments)"
    >
      <template #isic="testSlot">
          <el-form-item
            :label="testSlot.formField.chineseName" :prop="testSlot.formField.columnName"
          >
            <dr-lov v-model="testSlot.form[testSlot.formField.columnName]"
                    :lov-params="lovParams"
                    @getLov="getLov(arguments)"
                    @queryLov="queryLov(arguments)"
                    @input="inputLov(arguments,testSlot.formField.columnName)"
                    ref="testLov"
            ></dr-lov>
          </el-form-item>
      </template>
    </dr-edit-form>
    <!-- 导出表格组件 -->
    <educe ref="derived" :linkObj="cilentObj"></educe>
  </div>
</template>

<script>
import DetailDialog from './detail'
import { addClientBase, delClientBase, getClientBase, listClientBase, updateClientBase } from '@/api/rydemo/client/base'

export default {
  name: 'Client',
  components: {
    DetailDialog
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 状态数据字典
      // statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        creditCode: ''
      },
      list: [],
      //客户角色字典
      customerTypeOptions: [],
      //证件类型字典
      credentialsTypeOptions: [],
      // 导出对象
      cilentObj:{},
      queryColumnParams:{
        queryColumnList : [
          {
            columnName : 'name',
            chineseName: '客户名称',
            columnType : 'DECIMAL',
          },
          {
            queryType: 'LIKE',
            columnName: 'creditCode',
            chineseName: '证件号码',
            columnType: 'VARCHAR'
          },
          {
            queryType : 'lt',
            columnName: 'createtime',
            chineseName: '建户日期',
            columnType: 'DATE'
          }
        ]
      },
      dataTableParams:{
          addButton: true,
          addButtonName:'新增',
          detailButton: true,
          detailButtonIcon: 'el-icon-edit',
          detailButtonName:'详情',
          editButton: true,
          editButtonName: '编辑',
          deleteButton: true,
          deleteButtonName: '删除',
          exportButton: true,
          exportButtonName: '导出',
          submitButton: false,
          submitButtonName : '提交',
          submitDisabled:this.submitDisabledFunc,
          extraButtonList:[
            {
              buttonIcon: 'el-icon-edit',
              buttonName: '测试按钮',
              buttonFunc: this.testFunc
            }
          ],
          dataTableColumns: [
            {
              isRealColumn: false,
              columnName: 'id'
            },
            {
              isRealColumn: true,
              columnName: 'name',
              chineseName: '客户名称',
              dataTableColumnType: 'LINK',
              width: 90
            },
            {
              isRealColumn: true,
              columnName: 'customerType',
              chineseName: '客户角色',
              dataTableColumnType: 'SELECT',
              dict: 'customer_type',
              width: 90
            },
            {
              isRealColumn: true,
              columnName: 'credentialsType',
              chineseName: '证件类型',
              dataTableColumnType: 'SELECT',
              dict: 'certificate_type',
              width: 140
            },
            {
              isRealColumn: true,
              columnName: 'creditCode',
              chineseName: '证件号码',
              dataTableColumnType: 'NORMAL',
              width: 130
            },
            {
              isRealColumn: true,
              columnName: 'aclDeptText',
              chineseName: '所属部门',
              dataTableColumnType: 'NORMAL',
              width: 80
            },
            {
              isRealColumn: true,
              columnName: 'createTime',
              chineseName: '建户日期',
              dataTableColumnType: 'DATE',
              dateFormat:'{y}-{m}-{d}',
              width: 100
            }
          ]
      },
      editFormParam: {
        dialogTitle : '客户信息',
        formList:[
          {
            formTitle:'测试表1',
            editFormFieldList: [
              {
                columnType: 'INPUT',
                chineseName: '客户名称',
                columnName: 'name'
              },
              {
                columnType:'SELECT',
                chineseName: '客户角色',
                columnName: 'customerType',
                dict: 'customer_type'
              },
              {
                columnType:'SLOT',
                chineseName: '测试选择客户',
                columnName: 'isic'
              },
            ],
          },
          {
            formTitle:'测试表2',
            editFormFieldList: [
              {
                columnType:'SELECT',
                chineseName: '证件类型',
                columnName: 'credentialsType',
                dict: 'certificate_type'
              },
              {
                columnType: 'INPUT',
                chineseName: '证件号码',
                columnName: 'creditCode'
              }
            ],
          }
        ],
        editFormRules: {
          name: [
            { required: true, message: '客户名称不能为空', trigger: 'blur' },
            { min: 0, max: 100, message: '客户名称不能超过 100 个字'}
          ],
          customerType: [
            { required: true, message: '客户角色不能为空', trigger: 'change' }
          ],
          credentialsType: [
            { required: true, message: '证件类型不能为空', trigger: 'change' }
          ],
          creditCode: [
            { required: true, message: '证件号码不能为空', trigger: 'blur' },
            { pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, message: '请正确输入证件号码', trigger: 'blur' }
          ]
        }
      },
      lovParams: {
        lovName: 'testLov',
        placeholder: '测试内容',
        dialogTitle: '测试标题',
        keyColumnName: 'id',
        keyColumnType: 'INT',
        textColumnName: 'name',
        queryColumnParams:{
          queryColumnList : [
            {
              columnName : 'name',
              chineseName: '客户名称',
              columnType : 'DECIMAL',
            },
            {
              queryType: 'LIKE',
              columnName: 'creditCode',
              chineseName: '证件号码',
              columnType: 'VARCHAR'
            },
            {
              queryType : 'lt',
              columnName: 'createtime',
              chineseName: '建户日期',
              columnType: 'DATE'
            }
          ]
        },
        dataTableParams:{
          disableOper: true,
          enableMultiSelect: false,
          extraButtonList:[
            {
              buttonIcon: 'el-icon-edit',
              buttonName: '测试按钮',
              buttonFunc: this.testFunc
            }
          ],
          dataTableColumns: [
            {
              isRealColumn: false,
              columnName: 'id'
            },
            {
              isRealColumn: true,
              columnName: 'name',
              chineseName: '客户名称',
              dataTableColumnType: 'LINK',
              width: 90
            },
            {
              isRealColumn: true,
              columnName: 'customerType',
              chineseName: '客户角色',
              dataTableColumnType: 'SELECT',
              dict: 'customer_type',
              width: 90
            },
            {
              isRealColumn: true,
              columnName: 'credentialsType',
              chineseName: '证件类型',
              dataTableColumnType: 'SELECT',
              dict: 'certificate_type',
              width: 140
            },
            {
              isRealColumn: true,
              columnName: 'creditCode',
              chineseName: '证件号码',
              dataTableColumnType: 'NORMAL',
              width: 130
            },
            {
              isRealColumn: true,
              columnName: 'aclDeptText',
              chineseName: '所属部门',
              dataTableColumnType: 'NORMAL',
              width: 80
            },
            {
              isRealColumn: true,
              columnName: 'createTime',
              chineseName: '建户日期',
              dataTableColumnType: 'DATE',
              dateFormat:'{y}-{m}-{d}',
              width: 100
            }
          ]
        }
      }
    }
  },
  created() {
  },
  methods: {
    testFunc() {

    },
    submitDisabledFunc(row) {
      if(row.status === '5' || row.status === '8') return true;
      else return false;
    },
    getList(msg) {
      this.$nextTick(_ => {
        let queryParam = msg[0]
        this.$refs['dataTable'].loading = true
        listClientBase(queryParam).then(
          response => {
            this.$refs['dataTable'].list = response.rows
            this.$refs['dataTable'].total = response.total
            this.$refs['dataTable'].loading = false
          }
        )
      })
    },
    refreshDataList() {
      this.$nextTick(_ => {
        this.$refs['dataTable'].getList()
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    rowDblClick(row) {
      this.showDetail(row.id)
    },
    /** 新增按钮操作 */
    handleAdd(msg) {
      this.$nextTick(_ => {
        if(msg[0]){
          this.$refs['editDialog'].reset()
          this.$refs['editDialog'].open = true
        }else{
          this.$refs['editDialog'].formType = 'edit'
          this.$refs['editDialog'].init(msg[1])
          this.$refs['editDialog'].open = true
        }
      })
    },
    /** 详情页操作 */
    showDetail(msg) {
      this.$refs['detailDialog'].init(msg[0].id)
      this.$refs['detailDialog'].visible = true
    },
    /** 删除按钮操作 */
    handleDelete(msg) {
      let _this = this;
      _this.$nextTick(_ => {
        let row = msg[0]
        const name = row.name
        _this.$confirm('是否确认删除客户名称为"' + name + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delClientBase(row.id)
        }).then(() => {
          _this.$refs['dataTable'].getList()
          _this.msgSuccess('删除成功')
        }).catch(function () {
        })
      })
    },
    handleSubmit(msg) {
      this.$nextTick(_ => {
        let row = msg[0]
      })
    },
    /** 导出按钮操作 */
    handleExport(msg){
      let row = msg[0]
      this.cilentObj = {
        id:row.id,
        reportName: 'clientInformationReport.rptdesign', //导出文件名
        reportFormat:'html',                            //导出文件类型
        exportName:'客户基本信息表'
      }
      this.$nextTick(()=>{
        this.$refs['derived'].getlink()
      })
    },
    initEdit(msg){
      this.$nextTick(_ => {
        let row = msg[0]
        if(row){
          this.$refs['editDialog'].form  = row
        }
        setTimeout(() =>{
          this.$refs['testLov'].init()
        },500);
      })
    },
    saveEdit(msg){
      this.$nextTick(_ => {
        let form = msg[0]
          updateClientBase(form).then(response => {
            if (response.code === 200) {
              this.msgSuccess('修改成功')
              this.$refs['editDialog'].open = false
              this.$refs['dataTable'].getList()
              this.openNextPage(form.id)
            }
          })
      })
    },
    saveAdd(msg){
      this.$nextTick(_ => {
        let form = msg[0]
        addClientBase(form).then(response => {
          if (response.code === 200) {
            this.msgSuccess('新增成功')
            this.$refs['editDialog'].open = false
            this.$refs['dataTable'].getList()
            this.openNextPage(response.data.id)
          }
        })
      })
    },
    openNextPage(id) {
      // 打开录入页面
      this.showDetail([{id:id}])
      this.$refs['detailDialog'].toggleButton.altering = true
      this.$refs['detailDialog'].toggleButton.text = '保存'
    },
    getLov(msg) {
      this.$nextTick(_ => {
        let value = msg[0]
        let lovName = msg[1]
        if(lovName === 'testLov') {
          getClientBase(value).then(res => {
            if(res.code === 200) {
              this.$refs['testLov'].selectedText = res.data.name
            }
          })
        }
      })
    },
    queryLov(msg){
      this.$nextTick(_ => {
        this.$refs['testLov'].$refs['dataTable'].loading = true
        let queryParam = msg[0]
        let lovName = msg[1]
        if(lovName === 'testLov') {
          listClientBase(queryParam).then(res => {
            if(res.code === 200) {
              this.$refs['testLov'].$refs['dataTable'].list = res.rows
              this.$refs['testLov'].$refs['dataTable'].total = res.total
              this.$refs['testLov'].$refs['dataTable'].searchOver(this.$refs['testLov'].selectedValueArr)
            }
          })
        }
      })
    },
    inputLov(msg,columnName) {
      this.$nextTick(_ => {
        let value = msg[0]
        this.$refs['editDialog'].form[columnName] = value
      })
    }
  }
};
</script>
